import { Button } from "../../components";
import Icon from "../../assets/react.svg";
import './index.less'

import { useSlate } from "slate-react";
import { Transforms } from "slate";

const Image= () => {
    const editor = useSlate();

  const onChange=(event:any)=> {  

    const file =event.target?.files?.[0];  
    console.log(file)

    const reader = new FileReader();  
    reader.onloadend = function () {  
        // 当文件读取完成时，将Base64编码的字符串设置为图片的src属性  
        insertImage(reader.result)
    }  
  
    if (file) {  
        reader.readAsDataURL(file); // 以Base64编码的方式读取文件内容  
    } else {  
        insertImage('')
    }  
 }
  
 const insertImage = (url:string) => {
    const text = { text: '' }
    const image = { type: 'image',key:new Date().getTime(), url, children: [text] }
    Transforms.insertNodes(editor, image,{})
  }
  
  return (
    <Button
      className={'img-upload'}
      onClick={() => {
      
      }}
      icon={Icon}
    >
     <input   onChange={onChange} className={'img-upload-input'} type="file" accept="image/*" />
    </Button>
  );
};

export default Image